<template>
  <div class="register_box">
    <el-form
      class="register_form"
      ref="registerFormRef"
      :rules="rules"
      :model="registerForm"
    >
      <div class="title">注册</div>
      <el-form-item prop="email">
        <el-input
          size="large"
          placeholder="请输入邮箱"
          v-model="registerForm.email"
          clearable
        >
          <template #prefix>
            <span class="iconfont icon-youxiang"></span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="emailCode">
        <div class="send-email-panel">
          <el-input
            size="large"
            clearable
            placeholder="请输入邮箱验证码"
            v-model="registerForm.emailCode"
          >
            <template #prefix>
              <span class="iconfont icon-yanzhengyanzhengma"></span>
            </template>
          </el-input>
          <el-button type="primary" size="large" class="send-mail-btn" @click="sendMail"
            >{{ codeNum == 60 ? "获取验证码" : `(${codeNum}后发送验证码)` }}
          </el-button>
        </div>
      </el-form-item>
      <el-form-item prop="username">
        <el-input
          size="large"
          placeholder="账号"
          v-model="registerForm.username"
          clearable
        >
          <template #prefix>
            <span class="iconfont icon-xingmingyonghumingnicheng"></span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          size="large"
          placeholder="密码"
          v-model="registerForm.password"
          clearable
          show-password
        >
          <template #prefix>
            <span class="iconfont icon-password"></span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="resetPassword">
        <el-input
          size="large"
          placeholder="重复密码"
          v-model="registerForm.resetPassword"
          clearable
          show-password
        >
          <template #prefix>
            <span class="iconfont icon-password"></span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <a href="javascript:void(0)" class="a_link" @click="goToLogin"
          >已有账号?点击登录</a
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 365px; height: 40px" @click="registerBtn"
          >注册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const { proxy } = getCurrentInstance();

const registerForm = ref({});
const registerFormRef = ref();
const rules = {
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  emailCode: [{ required: true, message: "请输入邮箱验证码", trigger: "blur" }],
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  resetPassword: [{ required: true, message: "请再次输入密码", trigger: "blur" }],
};

const codeNum = ref(60);
const clearId = ref();
const isCheckSend = ref(false);
const sendMail = async () => {
  if (registerForm.value.email == undefined) {
    return proxy.$message.error("请输入邮箱");
  }
  if (isCheckSend.value || codeNum.value != 60) {
    return;
  } else {
    isCheckSend.value = true;
    const res = await proxy.Api.qqMail(registerForm.value);
    clearId.value = setInterval(() => {
      codeNum.value--;
      if (codeNum.value == 0) {
        clearInterval(clearId.value);
        codeNum.value = 60;
        isCheckSend.value = false;
      }
    }, 1000);
    if (res.code != 200) {
      proxy.$message.error(res.message);
    } else {
      proxy.$message.success("发送邮箱验证码成功");
    }
  }
};

const registerBtn = () => {
  proxy.$refs.registerFormRef.validate((valid) => {
    if (valid) {
      proxy.Api.register(registerForm.value).then((res) => {
        if (res.code != 200) {
          proxy.$message.error(res.message);
        } else {
          proxy.$message.success("注册成功,请登录");
          router.push("/login");
        }
      });
    }
  });
};

const goToLogin = () => {
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.register_box {
  width: 400px;
  height: 510px;
  background-color: #fff;
  border-radius: 1px;
  position: absolute;

  .register_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .title {
      font-size: 30px;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 30px;
      font-weight: bold;
    }

    .send-email-panel {
      display: flex;
      width: 100%;
      justify-content: space-between;

      .send-mail-btn {
        margin-left: 5px;
      }
    }

    .send-email-panel {
      display: flex;
    }

    .a_link {
      text-decoration: none;
      color: #007fff;
    }
  }
}
</style>
